<template>
  <h3>Setup函数的演示</h3>
  <hr>
    <setup-child @testevent="showTestMsg" msg="来自父组件的消息" course="应用物理学" other="其他message">
      <div class="slotanonymous">匿名slot</div>
      <template v-slot:second>
        <div class="slotsecond">有名字的插槽</div>
      </template>
    </setup-child>
  <hr>
  <p>
    注意:<br>
    1. setup在组件的 beforeCreate 事件前执行一次,此函数中 this 是 undefined. 按F12打开浏览器调试窗口可以查看日志.<br>
    2. setup的参数有两个:<br>
    &nbsp;&nbsp;1). props: 此对象包括了外部传入并且内部声明接收了的属性,未接收的属性则存于 content.attrs中;<br>
    &nbsp;&nbsp;2). context: 此上下文对象主要包括 attrs,slots,emit.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;(2.1) attrs: 此对象包含组件外部传进来,但没有在props中声明接收的属性,相当于 this.$attrs .<br>
    &nbsp;&nbsp;&nbsp;&nbsp;(2.2) slots: 组件收到的插槽内容,相当于 this.$slots .<br>
    &nbsp;&nbsp;&nbsp;&nbsp;(2.3) emit: 分发自定义事件的函数,相当于 this.$emit .<br>
  </p>
</template>

<script>
import SetupChild from './setupChild.vue'

export default {
  components: {
    SetupChild
  },
  beforeCreate(){
    console.log('***beforeCreate()***')
  },
  setup() {
    console.log('***setup()***, this=', this)

    function showTestMsg(msg) {
      alert('来自子组件的自定义事件触发了,消息内容是: ' + msg)
    }

    return {showTestMsg}
  },
}
</script>

<style scoped>

h3 {
  text-align: center;
}

.slotanonymous {
  margin-left: 20px;
  padding-left: 20px;
  background-color: #5ae;
}

.slotsecond {
  margin-top: 5px;
  margin-left: 20px;
  padding-left: 20px;
  background-color: #e9a;
}

</style>